import React from "react"
// 侧边栏模块区域
import { Layout, Menu} from 'antd';
const { SubMenu } = Menu;
const { Content, Sider } = Layout;
// 导入路由组件
import {Route,Link,Switch} from "react-router-dom"
// 导入movieList组件
import MovieList from "@/components/MovieList.jsx"
// 导入MovieDetail组件
import MovieDetail from "@/subComponents/MovieDetail.jsx"
export default class MovieContainer extends React.Component{
    constructor(props){
        super(props)
        this.state={

        }
        
    }
    render(){
        return <Layout style={{"height":"100%"}}>
        <Sider width={200} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={[window.location.hash.split('/')[2]]}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item key="in_theaters"><Link to="/movie/in_theaters/1">正在上映</Link></Menu.Item>
            <Menu.Item key="coming_soon"><Link to="/movie/coming_soon/1">即将热映</Link></Menu.Item>
            <Menu.Item key="top250"><Link to="/movie/top250/1">TOP250</Link></Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ paddingLeft:'1px',backgroundColor:'#fff'}}>
          <Content
            style={{
              background: '#fff',
              padding: 10,
              margin: 0,
              minHeight: 280
            }}>
            {/* 在匹配路由规则的时候，我们提供了两个参数，如果想要从路由规则中提取参数，需要使用this.props.match.aprams.** */}
            {/* 注意：那怕为路由启用了精确匹配模式，也会从上到下匹配一下，把所有的路由都走一遍 */}
           <Switch>
             {/* 使用Switch组件，如果前面的路由匹配到了，后面的路由不会去匹配你，选其一 */}
             <Route path="/movie/detail/:id" component={MovieDetail}></Route>    
            <Route exact path="/movie/:type/:page" component={MovieList}></Route> 
           </Switch>
          </Content>
        </Layout>
      </Layout>
    }
}